<script setup lang="ts">
const menuData = useMenuData()

const showSubMenuMask = ref(false)
function onMouseenterMenu() {
  showSubMenuMask.value = true
}
function onMouseleaveMenu() {
  showSubMenuMask.value = false
}
function onMouseenterSubmenu() {
  showSubMenuMask.value = true
}

const menuIndex = ref(-1)
function onMouseenterMenuItem(index: number) {
  menuIndex.value = index
}
function onMouseleaveSubmenu() {
  menuIndex.value = -1
}
function onClickSubmenu() {
  menuIndex.value = -1
  showSubMenuMask.value = false
}

const el = ref()
const oldY = ref(0)
const scroll = useWindowScroll()
const instance = getCurrentInstance()
watch(() => scroll, (val) => {
  // 向下滚动
  if (val.y.value > oldY.value) {
    if (val.y.value > 110)
      el.value.style.top = '-110px'
  }
  else if (val.y.value < oldY.value) {
    if (val.y.value > 110) {
      el.value.style.top = '0'
      el.value.style.position = 'fixed'
    }
  }
  oldY.value = val.y.value

  instance?.proxy?.$forceUpdate()
}, { deep: true })
</script>

<template>
  <div ref="el" class="header">
    <div class="content">
      <NuxtLink to="/">
        <img class="logo" src="https://public-oss-file.zmaxfilm.com/website-compress/logo.png" alt="logo">
      </NuxtLink>
      <div class="menu-list" @mouseenter="onMouseenterMenu" @mouseleave="onMouseleaveMenu">
        <div v-for="(menu, index) in menuData" :key="index" class="menu-item" @mouseenter="onMouseenterMenuItem(index)"
          @mouseleave="onMouseleaveSubmenu">
          <NuxtLink :to="menu.route">
            <span class="menu-title">{{ menu.title }}</span>
          </NuxtLink>
          <transition name="submenu">
            <ul v-show="menuIndex === index" class="submenu-list" @mouseenter="onMouseenterSubmenu">
              <li v-for="(submenu, sindex) in menu.child" :key="sindex" class="submenu-item">
                <NuxtLink :to="submenu.route" @click="onClickSubmenu">
                  <span class="submenu-title">{{ submenu.title }}</span>
                </NuxtLink>
              </li>
            </ul>
          </transition>
        </div>
      </div>
    </div>
    <div class="submenu-mask shadow-sm" :class="{ 'submenu-mask--show': showSubMenuMask }" />
  </div>
</template>

<style lang="scss" scoped>
.header {
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 110px;
  position: absolute;
  background-color: #fff;
  transition: all 0.3s ease;

  .content {
    width: 1200px;
    height: 100%;
    display: flex;
    margin: 0 auto;
    position: relative;
  }

  .logo {
    top: 35px;
    left: 0;
    width: 128px;
    height: 40px;
    position: absolute;
  }

  .menu-list {
    gap: 44px;
    height: 100%;
    display: flex;
    margin-left: auto;

    .menu-item {
      display: flex;
      cursor: pointer;
      position: relative;
      align-items: center;

      &:hover {
        .menu-title {
          color: var(--theme-color);
        }

        .menu-title::after {
          opacity: 1;
          transform: translateX(-50%) scaleX(1);
        }

        .submenu-list {
          opacity: 1;
        }
      }

      .menu-title {
        font-size: 18px;

        &::after {
          content: '';
          left: 50%;
          width: 58px;
          height: 4px;
          bottom: 0;
          opacity: 0;
          position: absolute;
          border-radius: 4px;
          transform-origin: center;
          transition: all 0.4s ease;
          transform: translateX(-50%) scaleX(0);
          background-color: var(--theme-color);
        }
      }

      .router-link-active .menu-title::after {
        opacity: 1;
        transform: translateX(-50%) scaleX(1);
      }

      .submenu-list {
        gap: 32px;
        top: 110px;
        left: 50%;
        z-index: 2;
        opacity: 0;
        display: flex;
        padding-top: 28px;
        position: absolute;
        flex-direction: column;
        transform: translateX(-50%);

        .submenu-item {
          color: #666666;
          font-size: 18px;
          text-align: center;
          white-space: nowrap;

          &:hover {
            color: var(--theme-color);
          }
        }
      }

      .submenu-enter-active {
        animation: submenu-enter 0.3s;
      }

      .submenu-leave-active {
        animation: submenu-leave 0.3s;
      }
    }
  }

  .submenu-mask {
    top: 110px;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 1;
    position: absolute;
    background-color: #fff;
    transition: all 0.3s ease;

    &.submenu-mask--show {
      height: 450px;
    }
  }
}
</style>
